.player {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: rgba(0,0,0,0.8);
  padding: 7px;
  z-index: 4;
  &.hide-player{
    bottom: -64px;
  }
  .audio-panel {
    color: #fff;
    height: 100%;
    display: flex;
    align-items: center;
    .player-icon{
      width: 50px;
      height: 50px;
    }
    .song-info {
      width: 50%;
      padding: 0 3px;
      .song {
        font-size: 16px;
      }
    }
    .control-panel {
      display: flex;
      height: 100%;
      width: 30%;
      .player-play {
        width: 50%;
        height: 100%;
        background: url("../../static/images/play_icon.png") center no-repeat;
        background-size: auto 70%;
      }
      .player-pause {
        width: 50%;
        height: 100%;
        background: url("../../static/images/pause_icon.png") center no-repeat;
        background-size: auto 70%;
      }
      .nextSong{
        width: 50%;
        height: 100%;
        background: url("../../static/images/next_icon.png") center no-repeat;
        background-size: auto 70%;
      }
    }
  }
  .audioControl{
    position: absolute;
    z-index: 2;
    bottom: 70px;
    width: 35px;
    height:35px;
    background-color:rgba(0,0,0,0.8);
    border-radius: 50%;
    animation: down-up 2s infinite linear;
    &.open-audio{
      background-image: url("../../static/images/open_icon.png");
    }
    &.close-audio{
      background-image: url("../../static/images/close_icon.png");
    }
    &.audioLoading{
      background-image: url("../../static/images/loading.gif");
      background-size: 35px 35px;
    }
  }
}
@keyframes down-up {
  0%{
    bottom: 72px;
  }
  50%{
    bottom: 65px;
  }
  100%{
    bottom:72px;
  }
}